<template>
  <div class="message" ref="myScrollbar">
    <van-sticky :offset-top="0">
      <van-nav-bar
        left-text="返回"
        :title="doc.contract.userName + '患者'"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <van-sticky :offset-top="45">
      <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
        <div class="time-down">
          <span> 咨询剩余时间</span>
          <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
        </div>
      </van-notice-bar>
    </van-sticky>

    <div id="msg-list" ref="msgList">
      <div style="width: 100%" class="clearfix">
        <div class="disease-card">
          <header>
            <h4>图文咨询</h4>
            <p>￥25.00</p>
          </header>
          <div class="contxt">
            <div><van-icon name="user-o" />患者信息</div>
            <span>刘海 ，男 ，30 岁</span>
            <div><van-icon name="smile-comment-o" />病情描述</div>
            <span>感冒了，不太舒服</span>
            <div><van-icon name="underway-o" />患者病史</div>
            <span>无</span>
          </div>
        </div>
      </div>

      <div id="msg-item" v-for="(msg, index) in chatRecord" :key="index">
        <div class="me" v-if="msg.to == 'hx' + doc.contract.userId">
          <p v-if="!msg.ext.isImage">{{ msg.sourceMsg }}</p>
          <van-image
            v-else
            width="60%"
            :src="msg.ext.url"
            @click="imgPrew(msg.ext.url)"
          ></van-image>
        </div>
        <div class="yi" v-else>
          <p v-if="!msg.ext.isImage">{{ msg.sourceMsg }}</p>
          <van-image
            v-else
            width="60%"
            :src="msg.ext.url"
            @click="imgPrew(msg.ext.url)"
          ></van-image>
        </div>
      </div>
    </div>

    <div class="text-input">
      <van-field
        v-model="msg"
        center
        clearable
        rows="1"
        type="textarea"
        placeholder="咨询消息"
      >
        <template #button>
          <div>
            <van-uploader :after-read="afterRead">
              <van-button size="small" type="success">图片</van-button>
            </van-uploader>
            <br />
            <van-button
              size="small"
              type="primary"
              @click="sendMesssage('hx' + doc.contract.userId,false, '')"
              >发送</van-button
            >
          </div>
        </template>
      </van-field>
    </div>
    <van-popup class="my-pop" v-model:show="state.upLoading"><van-loading size="24px" vertical>上传中...</van-loading></van-popup>
  </div>
</template>

<script>
import { reactive, ref, computed } from "vue";
import { Toast, ImagePreview } from "vant";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getChatRecord, msgUpload } from "../api/user";
export default {
  name: "Message",
  setup() {
    //实例化store
    const store = useStore();
    //实例化路由
    const router = useRouter();
    const route = useRoute();
    const msg = ref("");
    const onClickLeft = () => {
      router.go(-1);
    };

    const state = reactive({
      upLoading: false, //图片上传中
    });
    //发送消息
    const sendMesssage = (to, isImage, imgUrl) => {
      if (msg.value == " " || msg.value == "") {
        Toast("请输入消息内容");
      } else {
        let userInfo = JSON.parse(localStorage.getItem("userInfo"));
        store.commit("sendMessage", {
          msgContent: msg.value,
          to: to,
          from: "hx" + userInfo.docId,
           isImage: isImage,
          imgUrl: imgUrl,
        });
        msg.value = "";
      }
    };
    //倒计时
    const time = ref(1000 * 60 * 60 * 24 * 2);
    const container = ref(null);

    //文件上传
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      state.upLoading =true
      msgUpload(file.file).then((res) => {
        let userInfo = JSON.parse(localStorage.getItem("userInfo"));
        console.log(store.state.userList[route.params.id].contract.userId);
        console.log(userInfo.userId);

        store.commit("sendMessage", {
          msgContent: "",
          to: "hx" + store.state.userList[route.params.id].contract.userId,
          from: "hx" + userInfo.docId,
          isImage: true,
          imgUrl: res.data.data.url,
        });
         state.upLoading =false
      });
    };
    //图片预览
    const imgPrew = (url) => {
      ImagePreview([url]);
    };

    return {
      container,
      onClickLeft,
      state,
      store,
      time,
      route,
      msg,
      sendMesssage,
      chatRecord: computed(() => store.state.chatRecord),
      doc: computed(() => store.state.userList[route.params.id]),
      afterRead,
      imgPrew,
    };
  },
  updated() {
    this.scrollDown();
  },

  created() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    getChatRecord("hx" + this.doc.contract.userId, "hx" + userInfo.docId).then(
      (res) => {
        this.store.commit("getRecords", {
          records: res.data.data,
        });
      }
    );
  },

  methods: {
    //聊天窗⼝滚动条置底
    scrollDown() {
        this.$refs.myScrollbar.scrollTop =
      this.$refs.msgList.scrollHeight+ 80;
      // this.$refs.myScrollbar.wrap.scrollTop=this.$refs.myScrollbar.wrap.scrollHeight
    },
  },
};
</script>

<style>
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.time-down {
  display: flex;
  align-items: center;
}
.time-down span {
  margin-right: 10px;
}
.message {
  text-align: left;
  background: #f1f2f6;
  height: 100vh;
  padding-bottom: 70px;
  overflow: auto;
}
.msg-list {
  height: 80vh;
  padding-bottom: 140px;
}
.text-input {
  /* display: flex; */
  /* align-items: center; */
  position: fixed;
  bottom: 0;
  border-top: 1px solid #e2e2e2;
  width: 100%;
}

.send-photo {
  /* flex: 0.2; */
  /* font-size: 24px;
  border-radius: 10px; */
}
.text-input .van-field__control {
  padding: 5px;
  background: #f1f2f6;
}
.text-input .van-field__button {
  display: flex;
  align-items: center;
}
.send {
  /* flex: 0.2px; */
  background: #1989fa;
  color: #fff;
  padding: 2px 5px;
  width: 40px;
  border-radius: 10px;
}
.tiem-down-f {
  position: sticky;
  top: 45px;
  width: 100%;
}
#msg-list {
  padding: 20px;
}
#msg-item {
  margin-bottom: 10px;
}
#msg-item .me {
  text-align: right;
  color: #fff;
  width: 100%;
}
#msg-item .me p {
  margin: 0;
  padding: 0;
  display: inline-block;
  background: #1989fa;
  padding: 10px;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#msg-item .yi p {
  margin: 0;
  padding: 0;
  display: inline-block;
  padding: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 20px;
  background: #f6f7f9;
}
.disease-card {
  width: 80%;
  border-radius: 10px;
  margin-bottom: 10px;
  float: left;
  background: #fff;
  overflow: hidden;
}
.disease-card header {
  display: flex;
  margin: 0;

  align-items: flex-end;
  background: #e8f8ff;
  padding: 10px 0;
  padding-left: 10px;
  border-bottom: 1px solid #e8f8ff;
}
.disease-card header p {
  font-size: 10px;
  margin-left: 10px;
}
.disease-card h4 {
  margin: 0;
  padding: 0;
}
.disease-card p {
  margin: 0;
  padding: 0;
}
.contxt {
  padding: 0 10px 20px 10px;
}
.contxt div {
  padding: 10px 0;
  font-size: 14px;
  color: rgba(69, 90, 100, 0.6);
  display: flex;
  align-items: center;
}
.contxt span {
  font-size: 14px;
  font-weight: bold;
  padding-left: 25px;
}
.contxt .van-icon {
  margin-right: 10px;
}
.my-pop{
  padding: 20px;
  border-radius: 20px;
}
</style>